// designWidth:设计稿的实际宽度值，需要根据实际设置
// maxWidth:支持缩放的最大屏幕宽度值，当屏幕宽度超过此值则按最大值进行计算，需要根据实际设置
// 这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为支持缩放的最大屏幕宽度值，例如设计稿为750，最大宽度为750，则为(750,750)
(function(designWidth, maxWidth) {
  var doc = document
  var win = window
  var docEl = doc.documentElement
  var remStyle = document.createElement('style') // 创建一个style标签，用于写html样式
  var tid //timeout句柄

  // 计算rem的值，即1rem等于多少px
  function refreshRem() {
    var width = docEl.getBoundingClientRect().width // 获取屏幕宽度
    maxWidth = maxWidth || 750 // 当没写maxWidth时，默认maxWidth=750
    // 当屏幕宽度超过最大缩放的值，则按最大值处理，不能无限缩放，那样会变得很大，很丑
    if (width > maxWidth) {
      width = maxWidth
    }
    // 计算html的font-size
    var rem = 100 / designWidth * width
    remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'
  }

  // 将style标签插入到文档
  if (docEl.firstElementChild) {
    docEl.firstElementChild.appendChild(remStyle)
  } else {
    var wrap = doc.createElement('div')
    wrap.appendChild(remStyle)
    doc.write(wrap.innerHTML)
    wrap = null
  }
  // 要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
  refreshRem()

  win.addEventListener('resize', function() {
    clearTimeout(tid) // 防止执行两次
    tid = setTimeout(refreshRem, 300)
  }, false)

  win.addEventListener('pageshow', function(e) {
    if (e.persisted) { // 浏览器后退的时候重新计算
      clearTimeout(tid)
      tid = setTimeout(refreshRem, 300)
    }
  }, false)

  // 设定body的默认字体大小，如果不设置，将集成html的字体大小，而我们设置的100，so...
  if (doc.readyState === 'complete') {
    doc.body.style.fontSize = '16px'
  } else {
    doc.addEventListener('DOMContentLoaded', function(e) {
      doc.body.style.fontSize = '16px'
    }, false)
  }
})(750, 1080)
// 这里我们输入设计稿750px，支持的最大屏幕宽度也是750px。